<template>
  <div v-if="projectList && projectList.length > 0" class="app-main-container">
    <el-tabs v-model="activeProject" @tab-click="tabChange">
      <el-tab-pane v-for="item in projectList" :key="item.id" :label="item.projectName" :name="item.id" />
    </el-tabs>
    <div class="ydHead">
      <div class="weeks">
        <!-- @click="weekChange(1, new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime)" -->
        <div :class="new Date(weekList[0].old.toLocaleDateString()).getTime() <= presentTime ? 'nos' : ''" @click="weekChange(1, false)"><i class="el-icon-arrow-left" /></div>
        <div v-for="(weeks, dex) in weekList" :key="dex" :class="new Date(weeks.old.toLocaleDateString()).getTime() < presentTime
            ? 'show'
            : activeDate == weeks.value
              ? 'show on'
              : 'show'
          " @click="weekClick(weeks, true)">
          <!-- @click="weekClick(weeks, new Date(weeks.old.toLocaleDateString()).getTime() >= presentTime)" -->
          <span>{{ weeks.label.slice(0, 5) }}</span>
          <span>{{ new Date(weeks.old.toLocaleDateString()).getTime() === presentTime ? $t('message.jintian') : weeks.label.slice(6, 15)
          }}</span>
        </div>
        <div @click="weekChange(2)"><i class="el-icon-arrow-right" /></div>
      </div>
      <div class="rili">
        <img src="@/icons/png/ic_rili.png">
        <el-date-picker v-model="activeDate" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions" :placeholder="$t('message.xzrq')" :clearable="false" class="tmrq" @change="getSiteList" />
      </div>
      <div v-if="operation && siteIds.length > 0" class="ztUl">
        <div v-if="meta.indexOf('AreaReserveCre') > -1" :class="reserveForm && reserveForm[0].status === '0' ? '' : 'none'" @click="reserveShow">
          {{ $t('message.yuding') }}
        </div>
        <!--  :class="overDues.indexOf(true) == -1 && (reserveForm && reserveForm[0].status === '1' || reserveForm && reserveForm[0].status === '4') -->
        <div :class="reserveForm && (reserveForm[0].status === '1' || reserveForm && reserveForm[0].status === '4')
            ? ''
            : 'none'
          " @click="paymentShow(details)">
          {{ $t('message.fukuan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveEdit') > -1" :class="overDues.indexOf(true) == -1 && (reserveForm && reserveForm[0].status === '1' || reserveForm && reserveForm[0].status === '2')
            ? ''
            : 'none'
          " @click="editShow">
          {{ $t('message.edit') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveCha') > -1" :class="/* overDues.indexOf(true) == -1 && */
            (reserveForm && reserveForm[0].status === '1' ||
              reserveForm && reserveForm[0].status === '2' ||
              reserveForm && reserveForm[0].status === '4' ||
              reserveForm && reserveForm[0].status === '5' ||
			   reserveForm && reserveForm[0].status === '9')
            ? ''
            : 'none'
          " @click="replaceShow">
          {{ $t('message.huanchan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveCan') > -1" :class="reserveForm && reserveForm[0].status === '1' || reserveForm && reserveForm[0].status === '2' || reserveForm && reserveForm[0].status === '4' || reserveForm && reserveForm[0].status === '5' 
            ? ''
            : 'none'
          " @click="cancelReserveBtn">
          {{ $t('message.qx') }}
        </div>
        <div :class="reserveForm && reserveForm[0].status === '2' || reserveForm && reserveForm[0].status === '5' ? '' : 'none'" @click="printOrder">
          {{ $t('message.dayin') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveStatus') > -1" :class="reserveForm[0].status === '0' && overDues.indexOf(true) == -1
            ? ''
            : 'none'
          " @click="lockStatus">
          {{ $t('message.suochan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveStatus') > -1" :class="overDues.indexOf(true) == -1 && reserveForm && reserveForm[0].status === '3'
            ? ''
            : 'none'
          " @click="lockStatusb">
          {{ $t('message.jiesuo') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveAsf') > -1" class="none" style="width: 88px">
          {{ $t('message.gdyd') }}
        </div>
      </div>
      <div v-if="!operation" class="ztUl">
        <div v-if="meta.indexOf('AreaReserveCre') > -1" class="none">
          {{ $t('message.yuding') }}
        </div>
        <div class="none">
          {{ $t('message.fukuan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveEdit') > -1" class="none">
          {{ $t('message.edit') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveCha') > -1" class="none">
          {{ $t('message.huanchan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveCan') > -1" class="none">
          {{ $t('message.qx') }}
        </div>
        <div class="none">
          {{ $t('message.dayin') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveBatchStatus') > -1" :class="reserveForm.length == 0 ? '' : 'none'" @click="showPlscBtn">
          {{ $t('message.suochan') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveStatus') > -1" class="none">
          {{ $t('message.jiesuo') }}
        </div>
        <div v-if="meta.indexOf('AreaReserveAsf') > -1" :class="reserveForm.length == 0 ? '' : 'none'" style="width: 88px" @click="showGdydBtn">
          {{ $t('message.gdyd') }}
        </div>
      </div>
      <div v-if="details.userType" class="memberDetail">
        <img src="@/icons/png/default_pic.png" width="40px" height="40px">
        <div class="memberRight">
          <div v-if="details.userType == 1">
            {{ $t('message.khxm') }}：{{ details.userName || $t('message.wu') }}
          </div>
          <div v-if="details.userType == 1">
            {{ $t('message.sjh') }}：{{ details.userPhone || $t('message.wu') }}
          </div>
          <div v-if="details.userType == 0">
            {{ $t('message.khxm') }}：{{ details.memberName }}
          </div>
          <div v-if="details.userType == 0">
            {{ $t('message.sjh') }}：{{ details.memberPhone }}
          </div>
          <div v-if="details.userType == 0">{{ $t('message.hykh') }}：{{ details.number }}</div>
          <div>
            {{ $t('message.ydfs') }}：{{ details.userType == 0 ? $t('message.hydji') : $t('message.skdji') }}
          </div>
          <div v-if="details.realPrice || details.realPrice === 0|| details.realPrice === '0'">{{ $t('message.ddje') }}：<span>{{ details.realPrice }}{{ $t('message.yuan') }}</span></div>
          <div v-else>
            {{ $t('message.ddje') }}：<span>{{ details.allPrice }}{{ $t('message.yuan') }}</span>
          </div>
          <div v-if="details.payMethod">
            {{ $t('message.zffs') }}：{{ details.payMethod }}
          </div>
          <div v-if="details.orderId" class="ckxq" @click="ckxqBtn">
            {{ $t('message.ckxq') }}
          </div>
          <!-- <div class="man">{{ $t('message.bz') }}：{{ details.remarks || $t('message.wu') }}</div> -->
        </div>
      </div>
    </div>
    <div class="ydCnt">
      <div v-if="siteListData && siteListData.length > 0" class="site-list-box">
        <div class="time-list">
          <div class="list-item close-all">
            {{ $t('message.cd') }}
          </div>
          <div class="list-item close-all" @click="yjkg">
            <img src="@/icons/png/ic_light.png" style="width: 20px;vertical-align: middle;margin-right: 4px;margin-top: -2px;">
            <b class="primaryColor" style="font-size: 13px;">{{ $t('message.dgkz') }}</b>
          </div>
          <div v-for="time in siteListData[0].sites" :key="time.id" class="list-item time">
            {{ time.beginTime + " - " + time.endTime }}
          </div>
        </div>
        <div v-if="siteListData &&
            siteListData.length > 0 &&
            siteListData[0].sites &&
            siteListData[0].sites.length > 0
          " class="site-list">
          <div v-for="site in siteListData" :key="site.id" class="site-item">
            <div class="list-item site-name">
              <el-popover placement="top-start" transition="none" popper-class="popClass" :content="site.siteModelName" trigger="hover">
                <span slot="reference">{{ site.siteModelName }}
                  <!-- {{ site.statusList ? '(' + site.statusList.indexOf('0') +
                  site.statusList.indexOf('3') + ')' : '(999)' }} -->
                </span>
              </el-popover>
              <img v-if="site.pdSc" src="@/icons/png/ic_lock.png" @click="jsClick_all(site)">
              <img v-else src="@/icons/png/ic_lock_sel.png" @click="suClick_all(site)">
            </div>
            <div v-if="site.status" class="list-item site-name" @click="kgdBtn(site.siteModelId)">
              <img src="@/icons/png/ic_light.png" style="width: 20px;vertical-align: middle;margin-right: 4px;margin-top: -2px;">
              <span style="font-size: 13px;color: #666666;">{{ $t('message.kgd') }}</span>
            </div>
            <div v-if="!site.status" class="list-item site-name" style="font-size: 13px;color: #666666;">
              {{ $t('message.wbd') }}
            </div>
            <el-popover v-for="price in site.sites" :key="price.id" transition="none" placement="top" popper-class="popClass" :close-delay="closeDelay" trigger="hover" :content="site.siteModelName +
                ':' +
                price.beginTime +
                ' - ' +
                price.endTime
              ">
              <div slot="reference" class="list-item site-price" :class="price.status === '6'
                  ? 'mian' : price.overdue == true
                    ? price.status === '1'
                      ? 'red'
                      : price.status === '2'
                        ? 'green'
                        : 'hui'
                    : price.status === '1' || price.status === '4'
                      ? 'red'
                      : price.status === '2' || price.status === '5'
                        ? 'green'
                        : price.status === '3'
                          ? 'yellow'
                          : price.status === '7' ||
                            price.status === '8' ||
                            price.status === '9' ||
                            price.status === '10'
                            ? 'hui'
                            : ''
                " :style="{
                  backgroundColor:
                    siteIds && siteIds.indexOf(price.id) != -1 && price.status === '0'
                      ? 'rgba(67, 94, 190, 1)'
                      : '',
                  color:
                    siteIds && siteIds.indexOf(price.id) != -1 && price.status === '0'
                      ? '#fff'
                      : '',
                }" @click="ccClick(
                  price,
                  site.siteModelName,
                  site.siteModelId,
                  site,
                  price
                )
                ">
                <div slot="reference">
                  <div v-if="price.status !== '3'" style="text-align: center;">{{ price.fromFlag === '0' ? $t('message.kuoc') : price.fromFlag === '1' ? $t('message.kuoh'): price.fromFlag === '2' ? $t('message.kuog'): '' }}{{ price.status === '6' ? $t('message.mianfei') : price.nickName ? price.nickName :
                    price.price }}</div>
                  <div v-if="price.status !== '3' && price.userPhone" style="text-align: center;">{{ price.userPhone }}</div>
                  <img v-if="price.status == '3'" src="@/icons/png/ic_lock_white.png" style="width: 20px">
                  <img v-if="siteIds && siteIds.indexOf(price.id) != -1" src="@/icons/png/yuding_ic_select@2x.png" class="xzXb">
                </div>
              </div>
            </el-popover>
          </div>
        </div>
        <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
          <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
        </div>
      </div>
      <div v-else style="display: flex;justify-content: center;align-items: center;height: 100%;">
        <img src="@/icons/png/default_nodata.png" style="width: 240px;display: block">
      </div>
    </div>
    <div class="ydFood">
      <div class="colorList">
        <div v-for="color in colorList.slice(0, 5)" :key="color.id" class="color-item">
          <div class="number" :style="'background-color: ' + color.number" />
          <div class="name">{{ color.name }}</div>
        </div>
      </div>
    </div>
    <EditHc ref="edithc" @hcSccess="getSiteList" />
    <orderDialog ref="child" @orderSuccess="getSiteList" />
    <EditPd ref="edit" @success="getSiteList" @paymentShow="paymentShowBtn" />
    <plsc ref="plsc" @plscSuccess="getSiteList" />
    <gdyd ref="gdyd" @gdydSuccess="getSiteList" />
    <areaSellOrderDetail ref="areaSellOrderDetail" />
    <closeReserve ref="closeReserve" @closeSccess="getSiteList" />
    <printTem v-if="isPrint" ref="printTemRef" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { parseTime } from '@/utils/index'
import {
  memberInfo,
  siteList,
  siteReserve,
  getProjectList,
  batchSiteLockStatus,
  printOrder,
  devSiteLine
} from '@/api'
import orderDialog from '@/components/order'
import EditPd from '@/components/edtPd'
import areaSellOrderDetail from '@/components/areaSellOrderDetail.vue'
import plsc from './components/plsc.vue' // 批量锁场
import gdyd from './components/gdyd.vue' // 固定预定
import EditHc from './components/hc.vue' // 换场
import printTem from '@/components/printTem'
import closeReserve from '../closeReserve.vue' // 取消
import store from '@/store'
export default {
  name: 'AreaReserve',
  components: {
    orderDialog,
    EditPd,
    areaSellOrderDetail,
    plsc,
    gdyd,
    EditHc,
    closeReserve,
    printTem
  },
  data () {
    return {
      modalDialog: store.getters.dialog,
      isPrint: false,
      authCode: '',
      mapWeek: [this.$t('message.z7'), this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6')],
      pickerOptions: {
        disabledDate (time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      presentTime: new Date(new Date().toLocaleDateString()).getTime(),
      colorList: [
        { id: 1, name: this.$t('message.kycd'), number: 'rgba(244, 247, 252, 1)' },
        { id: 2, name: this.$t('message.cdsc'), number: 'rgba(251, 188, 38, 1)' },
        { id: 3, name: this.$t('message.ydwf'), number: 'rgba(237, 77, 0, 1)' },
        { id: 4, name: this.$t('message.ydyf'), number: 'rgba(34, 179, 107, 1)' },
        { id: 5, name: this.$t('message.gqcd'), number: 'rgba(204, 204, 204, 1)' },
        { id: 6, name: this.$t('message.mfcd'), number: 'rgb(61,206,209)' }
      ],
      projectList: [],
      closeDelay: 0,
      activeProject: '',
      activeDate: '',
      activeArea: '',
      siteListData: [],
      weekList: [],
      weekListb: [],
      currentDate: '',
      details: {},
      operation: false,
      overdue: false,
      overDues: [],
      status: '',
      siteIds: [],
      siteId: '',
      showReserve: false,
      editPd: false,
      reserveForm: [],
      userType: 0,
      zprice: '',
      week: [],
      reserveAndOrderId: '',
      members: '',
      member: '',
      showPayment: false,
      payList: [],
      payMethod: '01',
      showReplace: false,
      cardFk: '',
      memberfk: '',
      payPwd: '',
      change: 0,
      changePrice: '',
      meta: [],
      lastPrice: {},
      integralUse: '0',
      code: '',
      orderId: ''
    }
  },
  created () {
    this.activeDate = this.formatDate(new Date()).value
    this.setDate(new Date())
    this.toGetProjectList()
    this.meta = this.$route.meta.buttons || []
  },
  activated () {
    if (this.activeProject) {
      this.getSiteList()
    }
  },
  methods: {
    yjkg () {
      const that = this
      const venueId = sessionStorage.getItem('venueId')
      const siteListData = this.siteListData
      const siteId = []
      siteListData.forEach((e) => {
        siteId.push(e.siteModelId)
      })
      this.$confirm(this.$t('message.qxzyjkd'), this.$t('message.ts'), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t('message.yjgd'),
        cancelButtonText: this.$t('message.yjkd'),
        type: 'warning'
      })
        .then(() => {
          devSiteLine({ param: { siteId, venueId, status: '1' } })
            .then((res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.yjgdcg'))
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            devSiteLine({ param: { siteId, venueId, status: '0' } })
              .then((res) => {
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.yjkdcg'))
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    kgdBtn (siteId) {
      const that = this
      this.$confirm(this.$t('message.qxzcgkdg'), this.$t('message.ts'), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t('message.gd'),
        cancelButtonText: this.$t('message.kd'),
        type: 'warning'
      })
        .then(() => {
          const venueId = sessionStorage.getItem('venueId')
          devSiteLine({ param: { siteId: [siteId], venueId, status: '1' } })
            .then((res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.gdcg'))
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            const venueId = sessionStorage.getItem('venueId')
            devSiteLine({ param: { siteId: [siteId], venueId, status: '0' } })
              .then((res) => {
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.kdcg'))
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    // 获取星期
    calculation (s) {
      return s < 10 ? '0' + s : s
    },
    formatDate (date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = [this.$t('message.z7'), this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6')][
        date.getDay()
      ]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    weekClick (e, pd) {
      if (pd) {
        this.activeDate = e.value
        this.currentDate = e.old
        this.getSiteList(2)
      }
    },
    addDate (date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate (date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
    },
    weekChange (e, b) {
      const mapWeek = this.mapWeek
      if (e === 1) {
        if (!b) {
          this.weekList.forEach((item) => {
            item.label =
              dayjs(item.value).subtract(7, 'day').format('MM-DD') +
              ' ' +
              mapWeek[dayjs(item.value).day()]
            item.value = dayjs(item.value)
              .subtract(7, 'day')
              .format('YYYY-MM-DD')
            item.old = new Date(item.old.getTime() - 604800000)
          })
          console.log(12312, new Date(this.weekList[0].old.toLocaleDateString()).getTime(), this.presentTime)
          if (new Date(this.weekList[0].old.toLocaleDateString()).getTime() <= this.presentTime) {
            // this.activeDate = parseTime(new Date(this.presentTime)).slice(0, 10)
            this.activeDate = this.weekList[0].value
            this.getSiteList()
          } else {
            this.activeDate = this.weekList[0].value
            this.getSiteList()
          }
        }
      } else {
        this.weekList.forEach((item) => {
          item.label =
            dayjs(item.value).add(7, 'day').format('MM-DD') +
            ' ' +
            mapWeek[dayjs(item.value).day()]
          item.value = dayjs(item.value).add(7, 'day').format('YYYY-MM-DD')
          item.old = new Date(item.old.getTime() + 604800000)
        })
        this.activeDate = this.weekList[0].value
        this.getSiteList()
      }
    },
    // 星期结束
    // 全部锁定
    suClick_all (obj) {
      this.details = {}
      this.reserveAndOrderId = ''
      const siteIds = []
      const overDues = []
      const reserveForm = []
      const ul = obj.sites
      ul.forEach(e => {
        if (e.status === '0' && !e.overdue) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: obj.siteModelName, siteModelId: obj.siteModelId })
        }
      })
      this.siteIds = siteIds
      this.overDues = overDues
      this.reserveForm = reserveForm
      const that = this
      if (reserveForm.length > 0) {
        this.operation = true
        this.$confirm(
          this.$t('message.qrsydqkycdtc'),
          this.$t('message.suochan'),
          {
            confirmButtonText: this.$t('message.qd'),
            cancelButtonText: this.$t('message.qx'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              batchSiteLockStatus({ param: { type: '0', siteIds, projectId: that.activeProject } }).then((res) => {
                ctx.confirmButtonLoading = false
                close()
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.sccg2'))
                  that.getSiteList()
                  that.operation = false
                }
              })
                .catch(() => { ctx.confirmButtonLoading = false })
            }
          }).finally(() => { })
      } else {
        this.operation = false
      }
    },
    // 全部解锁
    jsClick_all (obj) {
      this.details = {}
      this.reserveAndOrderId = ''
      const siteIds = []
      const overDues = []
      const reserveForm = []
      const ul = obj.sites
      const that = this
      ul.forEach(e => {
        if (e.status === '3' && !e.overdue) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: obj.siteModelName, siteModelId: obj.siteModelId })
        }
      })
      this.siteIds = siteIds
      this.overDues = overDues
      this.reserveForm = reserveForm
      if (reserveForm.length > 0) {
        this.operation = true
        this.$confirm(
          this.$t('message.qrjscctc'),
          this.$t('message.jiesuo'),
          {
            confirmButtonText: this.$t('message.qd'),
            cancelButtonText: this.$t('message.qx'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              batchSiteLockStatus({ param: { type: '1', siteIds, projectId: that.activeProject } }).then((res) => {
                ctx.confirmButtonLoading = false
                close()
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.jscg'))
                  that.getSiteList()
                  that.operation = false
                }
              })
                .catch(() => { ctx.confirmButtonLoading = false })
            }
          }).finally(() => { })
      } else {
        this.operation = false
      }
    },
    // ccClick
    ccClick (e, name, id, cnt, b) {
      if (e.status === '6' || e.status === '7' || e.status === '8' || e.status === '9' || e.status === '10') return false
      this.status = e.status
      this.siteId = e.id
      this.overdue = e.overdue
      let siteIds = [...this.siteIds]
      let overDues = [...this.overDues]
      let reserveForm = [...this.reserveForm]
      if (siteIds.length === 0) {
        siteIds = [e.id]
        overDues = [e.overdue]
        reserveForm = [{ ...e, name: name, siteModelId: id }]
      } else {
        let pd = true
        for (let num = 0; num < reserveForm.length; num++) {
          if (
            reserveForm[num].id === e.id &&
            reserveForm.length > 0
          ) {
            reserveForm.splice(num, 1)
            siteIds.splice(num, 1)
            overDues.splice(num, 1)
            pd = false
          }
        }
        if (pd) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: name, siteModelId: id })
        }
      }
      this.reserveForm = reserveForm
      this.siteIds = siteIds
      this.overDues = overDues
      if (reserveForm.length > 0) {
        this.status = reserveForm[0].status
        this.siteId = reserveForm[0].id
        this.overdue = reserveForm[0].overdue
      }
      let zprice = 0
      if (reserveForm.length === 0) {
        this.operation = false
        this.details = {}
      } else {
        let operation = true
        let orderIdPd = true
        const paStatus = reserveForm[0].status
        const orderId = reserveForm[0].orderId || ''
        reserveForm.forEach(k => {
          if (paStatus !== k.status) {
            operation = false
          }
          if (!orderId || orderId !== k.orderId) {
            orderIdPd = false
          }
          zprice = zprice + k.price
        })
        this.orderId = orderId
        if (reserveForm.length > 1 && (reserveForm[0].status === '1' || reserveForm[0].status === '2' || reserveForm[0].status === '4' || reserveForm[0].status === '5')) {
          if (orderIdPd) {
            this.operation = true
          } else {
            this.operation = false
          }
        } else {
          this.operation = operation
        }
        // if (reserveForm.length === 1) {
        //   if (
        //     reserveForm[0].status === '1' ||
        //     reserveForm[0].status === '2' ||
        //     reserveForm[0].status === '4' ||
        //     reserveForm[0].status === '5'
        //   ) {
        //     siteReserve({ param: { siteId: reserveForm[0].id }}).then((res) => {
        //       if (res.errorCode === '000000') {
        //         this.details = res.record
        //         this.reserveAndOrderId = res.record.id
        //       }
        //     })
        //   }
        // } else {
        if (!orderIdPd) {
          this.details = {}
          this.reserveAndOrderId = ''
        } else if (operation && !this.details.orderId && (reserveForm[0].status === '1' ||
          reserveForm[0].status === '2' ||
          reserveForm[0].status === '4' ||
          reserveForm[0].status === '5')) {
          siteReserve({ param: { siteId: reserveForm[0].id } }).then((res) => {
            if (res.errorCode === '000000') {
              this.details = res.record
              this.reserveAndOrderId = res.record.id
            }
          })
        }
        // }
      }
      this.zprice = zprice.toFixed(2)
    },
    siteFixedReserveShow () {
      if (this.status === '0' && this.siteIds.length >= 1) {
        this.$refs.fixedReserve.open(this.siteIds)
      }
    },
    // getList() {
    //   this.$router.push({ name: 'OrderList' })
    // },
    lockStatus () {
      const that = this
      if (this.operation && this.siteIds.length >= 1 && this.overDues.indexOf(true) === -1 && this.reserveForm[0].status === '0') {
        this.$confirm(
          this.$t('message.sdcctc'),
          this.$t('message.suochan'),
          {
            confirmButtonText: this.$t('message.qd'),
            cancelButtonText: this.$t('message.qx'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              batchSiteLockStatus({ param: { type: '0', siteIds: that.siteIds, projectId: that.activeProject } }).then((res) => {
                ctx.confirmButtonLoading = false
                close()
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.sccg2'))
                  that.getSiteList()
                  that.operation = false
                }
              })
                .catch(() => { ctx.confirmButtonLoading = false })
            }
          }).finally(() => { })
      }
    },
    cancelReserveBtn () {
      if (this.operation && this.reserveForm && (this.reserveForm[0].status === '1' || this.reserveForm[0].status === '2' || this.reserveForm[0].status === '4' || this.reserveForm[0].status === '5')) {
        let status = this.reserveForm[0].status
        if (status === '2') {
          status = '3'
        }
        const siteIds = [...this.reserveForm]
        const siteList = [...this.details.siteList]
        siteIds.forEach((item) => { item.siteId = item.id })
        siteList.forEach((item) => { item.siteId = item.id })
        this.$refs.closeReserve.cancelBtn({
          orderId: this.orderId,
          status,
          siteList
        }, siteIds)
      }
    },
    printOrder () {
      if (this.operation && this.reserveForm && (this.reserveForm[0].status === '2' || this.reserveForm[0].status === '5')) {
        this.areaOrderPrint()
      }
    },
    areaOrderPrint () {
      const venueId = sessionStorage.getItem('venueId')
      this.isPrint = true
      printOrder({
        param: {
          venueId,
          templateCode: 'SITETPML',
          workId: this.details.orderId
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          if (res.record && res.record.isPrint === '1' && res.record.dataList && res.record.dataList.length > 0) {
            res.record.dataList.forEach(item => {
              this.$refs.printTemRef.obj = { ...item }
              setTimeout(() => {
                this.$refs.printTemRef.print()
              }, 300)
              setTimeout(() => {
                this.isPrint = false
              }, 500)
            })
          } else {
            this.isPrint = false
          }
        } else {
          this.isPrint = false
        }
      }).catch(() => {
        this.isPrint = false
      })
    },
    lockStatusb () {
      if (this.operation && this.siteIds.length >= 1 && this.overDues.indexOf(true) === -1 && this.reserveForm[0].status === '3') {
        batchSiteLockStatus({ param: { type: '1', siteIds: this.siteIds, projectId: this.activeProject } }).then(
          (res) => {
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.jscg'))
              this.getSiteList()
              this.operation = false
            }
          }
        )
      }
    },
    toGetProjectList () {
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({ param: { venueId, status: '1', type: '0' } }).then(
        (res) => {
          if (res.errorCode === '000000') {
            this.projectList = res.recordList || []
            if (res.recordList && res.recordList.length > 0 && res.recordList[0].id) {
              this.activeProject = res.recordList[0].id
              this.getSiteList()
            }
          }
        }
      )
    },
    // 预定
    reserveShow () {
      this.$refs.edit.open(
        {
          reserveForm: this.reserveForm,
          zprice: this.zprice,
          siteIds: this.siteIds
        },
        this.reserveForm[0].status,
        false
      )
    },
    // 修改预定
    editShow () {
      if (this.operation && this.overDues.indexOf(true) === -1 && this.reserveForm && (this.reserveForm[0].status === '1' || this.reserveForm[0].status === '2')) {
        this.$refs.edit.open(
          {
            ...this.details,
            reserveForm: this.details.siteList,
            zprice: (this.details.allPrice * 1).toFixed(2)
          },
          this.reserveForm[0].status,
          true
        )
      }
    },
    // 获取场区列表
    // toGetAreaListByProjectId(id) {
    //   getAreaListByProjectId({ param: { id }}).then((res) => {
    //     this.areaList = res.recordList
    //     this.getSiteList()
    //   })
    // },
    // 项目切换
    tabChange (tab) {
      this.activeProject = tab.name
      this.activeArea = ''
      this.getSiteList()
      // this.activeDate = parseTime(new Date())
      // this.toGetAreaListByProjectId(tab.name)
    },
    // 获取场次列表
    getSiteList (e) {
      this.operation = false
      this.details = {}
      this.siteIds = []
      this.reserveForm = []
      const { activeArea: areaId, activeProject: projectId, activeDate } = this
      this.currentDate = new Date(activeDate)
      const day = parseTime(activeDate).slice(0, 10)
      this.orderId = ''
      siteList({ param: { areaId, projectId, day, flag: '1' } }).then((res) => {
        this.siteListData = res.recordList
        if (res.errorCode === '000000') {
          const siteListData = res.recordList || []
          this.siteListData = this.pdsite(siteListData)
        }
      })
      if (e !== 2) {
        this.setDate(new Date(activeDate))
      }
    },
    pdsite (siteListData) {
      const arrb = [...siteListData]
      arrb.forEach((v) => {
        let pd = false
        const site = v.sites || []
        site.forEach((e) => {
          if (e.status === '3') {
            pd = true
          }
        })
        site.forEach((e) => {
          if (e.status === '0' && !e.overdue) {
            pd = false
          }
        })

        v.pdSc = pd
      })
      return arrb
    },
    // 付款
    paymentShow (e, b) {
      if ((this.operation && this.reserveForm && this.reserveForm.length > 0 && (this.reserveForm[0].status === '1' || this.reserveForm[0].status === '4')) || b) {
        this.$refs.child.continuePay(e, 'areaSellOrder')
      }
    },
    paymentShowBtn (e) {
      this.getSiteList()
      this.paymentShow(e, 1)
    },
    replaceShow () {
      if (this.operation /* && this.overDues.indexOf(true) === -1 */ && this.reserveForm && this.reserveForm.length > 0 && (this.reserveForm[0].status === '1' || this.reserveForm[0].status === '2' || this.reserveForm[0].status === '4' || this.reserveForm[0].status === '5' || this.reserveForm[0].status === '9')) {
        if (this.details.userType === '0') {
          memberInfo({
            param: {
              id: this.details.memberId
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$refs.edithc.showBtn(res.record, this.details, this.activeDate, this.activeProject, this.siteIds)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          this.$refs.edithc.showBtn('', this.details, this.activeDate, this.activeProject, this.siteIds)
        }
      }
    },
    // 批量锁场
    showPlscBtn () {
      if (this.reserveForm.length === 0) {
        this.$refs.plsc.showPlscBtn(this.activeProject)
      }
    },
    ckxqBtn () {
      if (this.details.orderId) {
        // this.$refs.areaSellOrderDetail.showDetail(this.details)
        this.$refs.areaSellOrderDetail.getOrderDetail(this.details.id)
      }
    },
    // 固定预定
    showGdydBtn () {
      if (this.reserveForm.length === 0) {
        this.$refs.gdyd.showBtn(this.activeProject)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.app-main-container {
  padding-top: 10px;
  overflow: hidden;
  position: relative;
  height: calc(100% - 40px);

  .ydCnt {
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 220px);
  }

  .ydFood {
    height: 50px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #f1f1f1;

    .colorList {
      padding-left: 30px;
      flex: none;
      height: 50px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .color-item {
        margin-right: 20px;
        display: flex;
        align-items: center;
        padding: 10px 0;

        .number {
          width: 20px;
          height: 20px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .name {
          height: 20px;
          font-size: 13px;
          line-height: 20px;
        }
      }
    }
  }

  .ydHead {
    display: flex;
    height: 82px;
    align-items: center;

    .memberDetail {
      flex: 1;
      border-left: 1px solid #dfe2e8;
      padding-left: 20px;
      display: flex;

      img {
        margin-right: 10px;
      }

      .memberRight {
        flex: 1;
        display: flex;
        height: 82px;
        flex-wrap: wrap;
        max-width: 400px;

        div {
          width: 50%;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-bottom: 0;
          color: #222222;
          line-height: 20px;
          height: 20px;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.ckxq {
            cursor: pointer;
            color: $primaryColor;
          }

          span {
            color: $SecondColor;
            font-weight: bold;
          }
        }
      }
    }

    .weeks {
      display: flex;
      flex: none;
      width: 482px;
      align-items: center;
      margin-right: 20px;

      div {
        text-align: center;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        background: #f4f7fc;
        border-radius: 2px;

        &:first-of-type {
          width: 30px;
          margin-right: 6px;
          flex: none;

          &.no {
            color: rgb(170, 170, 170);
            cursor: not-allowed;
          }
        }

        &:last-of-type {
          width: 30px;
          margin-left: 10px;
        }

        &.show {
          width: 54px;
          height: 82px;
          background: #f4f7fc;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-left: 4px;

          &.on,
          &:hover {
            color: $primaryColor;
            border: 1px solid $primaryColor;
          }
        }

        &.none {
          background-color: rgb(170, 170, 170);
          color: #fff;
          cursor: not-allowed;
          width: 54px;
          height: 82px;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-left: 4px;
        }

        span {
          width: 100%;
          text-align: center;
          display: inline-block;
          line-height: 1.5;
        }
      }
    }

    .rili {
      width: 24px;
      height: 24px;
      margin-right: 20px;
      position: relative;

      img {
        width: 24px;
        height: 24px;
      }

      .tmrq {
        width: 24px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        height: 24px;
        opacity: 0;
      }
    }

    .searchForm {
      margin-right: 20px;
      width: 200px;
      flex: none;
    }

    .mb10 {
      margin-bottom: 10px;
    }

    .ztUl {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      box-sizing: border-box;
      padding-right: 10px;
      width: 360px;
      height: 82px;
      flex: none;

      div {
        width: 60px;
        height: 36px;
        color: #fff;
        text-align: center;
        line-height: 36px;
        background: $primaryColor;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 10px;

        &.none {
          background: #cccccc;
        }
      }
    }
  }

  .reserve,
  .reserve-info {
    background-color: #fff;
    max-height: calc(100vh - 144px);
    overflow-y: auto;
    padding: 30px;
  }

  .reserve {
    flex: 1;
    overflow: hidden;
  }

  .date-legend {
    display: flex;
    margin-bottom: 30px;
    overflow-x: auto;
    overflow-y: hidden;

    > * {
      margin-right: 20px;
    }

    .color-list {
      margin-right: 0;
      width: 550px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin: -10px 0;

      .color-item {
        margin-left: 20px;
        display: flex;
        align-items: center;
        padding: 10px 0;

        .number {
          width: 20px;
          height: 20px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .name {
          height: 20px;
          font-size: 13px;
          line-height: 20px;
        }
      }
    }
  }

  .week {
    display: flex;
    margin-bottom: 20px;

    span {
      flex: 1;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      background: #f4f7fc;
      border-radius: 2px;
      margin-right: 12px;

      &:first-of-type {
        width: 28px;
        flex: none;

        &.no {
          color: #cccccc;
          cursor: not-allowed;
        }
      }

      &:last-of-type {
        width: 28px;
        flex: none;
        margin-right: 0;
      }

      &.show {
        &.on,
        &:hover {
          color: #fff;
          background-color: $primaryColor;
        }
      }

      &.none {
        background-color: rgb(170, 170, 170);
        color: #fff;
        cursor: not-allowed;
      }
    }
  }

  .site-list-box {
    display: flex;
    position: relative;
    padding-left: 120px;

    .time-list {
      width: 120px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .list-item {
      border: 1px solid transparent;
      width: 120px;
      height: 40px;
      background-position: right bottom;
      background-size: 20px 20px;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      cursor: pointer;
      background-color: rgba(244, 247, 252, 1);
      font-size: 14px;

      &.close-all,
      &.time {
        background-color: #f5f5f5;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        line-height: 40px;
        text-align: center;
      }

      &.time {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      &.site-name {
        background-color: #f5f5f5;
        display: block;
        line-height: 40px;
        padding: 0 5px;
        text-align: center;
        display: flex;
        justify-content: center;

        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          overflow: hidden;
        }

        img {
          width: 20px;
          vertical-align: middle;
          margin-left: 5px;
          margin-top: -2px;
          flex: none;
        }
      }
    }

    .wzred {
      color: rgba(237, 77, 0, 1);
    }

    .site-price {
      color: #333333;
      position: relative;
    }

    .yellow {
      color: #fff;
      background-color: rgba(251, 188, 38, 1);
    }

    .blue {
      color: #fff;
      background-color: rgb(61, 206, 209);
    }

    .red {
      color: #fff !important;
      background-color: rgba(237, 77, 0, 1);
    }

    .green {
      color: #fff;
      background-color: rgba(34, 179, 107, 1);
    }

    .hui {
      color: #fff;
      background-color: rgba(204, 204, 204, 1);
    }

    .mian {
      color: $primaryColor;
    }

    .site-list {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;

      .site-item {
        width: 120px;
        margin-left: 5px;
      }
    }
  }

  .reserve-info {
    width: 310px;
    margin-left: 30px;

    .information {
      background: #f4f7fc;
      border-radius: 8px;
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 2;
    }

    .reserveBtn {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      div {
        width: 110px;
        height: 48px;
        margin-top: 20px;
        color: #fff;
        text-align: center;
        line-height: 48px;
        background: $primaryColor;
        border-radius: 4px;
        cursor: pointer;

        // &:nth-child(odd) {
        //   margin-right: 10px;
        // }
        &.none {
          background: #cccccc;
        }
      }
    }
  }
}

.member {
  background-color: rgba(67, 94, 190, 0.1);
  padding: 20px;

  .cont {
    display: flex;

    div {
      margin-right: 20px;
      font-size: 16px;
      line-height: 1.5;

      &.lx {
        border: 1px #999 solid;
        border-radius: 4px;
        background-color: #fff;
        padding: 0 20px;
      }

      span {
        color: rgb(170, 170, 170);
      }
    }
  }
}

.xzXb {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
}
</style>
